<template>
<view class="add-address">
    <view class="list">
        <view class="item f-nw">
            <view class="item-title">收货人</view>
            <view class="input-wrap">
                <input  v-model="formData.username" placeholder="姓名"></input>
            </view>
        </view>
        <view class="item f-nw">
            <view class="item-title">联系方式</view>
            <view class="input-wrap">
                <input v-model="formData.phone" placeholder="手机号码"></input>
            </view>
        </view>
        <view class="item f-nw">
            <view class="item-title">所在地区</view>
            <view class="input-wrap" @click="visible=true">
                <input v-if="address_str.length != 0" disabled :value="address_str.join('-')" placeholder="请选择"></input>
                <input v-else disabled placeholder="请选择"></input>
            </view>
        </view>
        <view class="item f-nw">
            <view class="item-title">详细地址</view>
            <view class="input-wrap">
                <input v-model="formData.address" placeholder="详细地址需填写栋楼层或房间号信息"></input>
            </view>
        </view>
        <view class="item f-nw">
            <view class="item-title">默认地址</view>
            <view class="input-wrap">
                <radio-group @change="radioGroupChange">
                    <radio :checked="formData.is_state==1" value="1" color="#49e461">是</radio>
                    <radio :checked="formData.is_state==2" value="2" color="#49e461">否</radio>
                </radio-group>
            </view>
        </view>
        <view class="operation f-c" @click="submit">确认</view>
        <view class="del-operation f-c" v-if="edit" catchtap="Adressaddress_del">删除地址</view>
    </view>
    
    <jc-address-picker 
    confirmColor="#49e461"
    :similar="false"
    :level='3'
    :visible.sync='visible'
    @change='addressChange'
    ></jc-address-picker>
</view>
</template>

<script>
	export default {
		data() {
			return {
                visible: false,
				formData: {
                    username: "",
                    phone: "",
                    area: "",
                    city: "",
                    province: "",
                    address: "",
                    is_state: 2,
                },
                edit: false,
                address_str: []
			}
		},
		methods: {
			radioGroupChange(e) {
                this.formData.is_state = e.detail.value
            },
            addressChange(data) {
                this.address_str = data.map(i=>i.name);
                this.formData.province = this.address_str[0];
                this.formData.city = this.address_str[1];
                this.formData.area = this.address_str[2];
            },
            submit() {
                let formData = this.formData;
                for (let key in formData) {
                    if (formData[key] == "") {
                        uni.showToast({
                            icon: "none",
                            title: "请填写完整的表单"
                        })
                        return;
                    }
                }
                if (this.edit) {
                    this.$api.updateAddress(this.formData,{loading: true}).then(res=>{
                        if (res.code == 200) {
                            uni.showToast({
                                title: "修改成功"
                            })
                            setTimeout(()=>{
                                uni.navigateBack();
                            },500)
                            
                        } else {
                            uni.showToast({
                                icon: "none",
                                title: res.msg
                            })
                        }
                    })
                } else {
                    this.$api.addAddress(this.formData,{loading: true}).then(res=>{
                        if (res.code == 200) {
                            uni.showToast({
                                title: "新增成功"
                            })
                            setTimeout(()=>{
                                uni.navigateBack();
                            },500)
                            
                        } else {
                            uni.showToast({
                                icon: "none",
                                title: res.msg
                            })
                        }
                    })
                }
            }
		},
        onLoad({item}) {
            this.edit = item ? true : false;
            if (item) {
                item = JSON.parse(item);
                this.formData.id = item.id;
                for (let key in this.formData) {
                    this.formData[key] = item[key]
                }
                this.address_str = [item.province,item.city,item.area]
            }
        }
	}
</script>

<style>
/* pages/address/addAddress/addAddress.wxss */
.item{
  padding: 20rpx ;
  padding-left: 0;
  margin-left: 20rpx;
  font-size: 28rpx;
  color: #333;
  border-bottom: 1rpx solid #eee; 
}
.item-title{
  width: 140rpx
}
.input-wrap{
  flex-grow: 1
}
.operation{
  width: 702rpx;
  height: 80rpx;
  background-color: #49e461;
  color: #fff;
  margin: 0 auto;
  margin-top: 40rpx;
  border-radius: 12rpx;
  font-size: 32rpx;
}
.del-operation{
  width: 702rpx;
  height: 80rpx;
  margin: 0 auto;
  margin-top: 20rpx;
  border-radius: 12rpx;
  font-size: 32rpx;
  border: 1rpx solid #eee;
  color: #333
}
radio{
  transform: scale(0.8);
  margin-right: 10rpx
}
</style>
